<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInputNumber,
  ElPopover,
  ElSwitch,
  ElTable,
  ElTableColumn,
} from 'element-plus';

import { arrEquals, descartes } from '#/utils/util';

interface dataType {
  tableData: any[];
  skusList: any[];
  form: any;
  batchPopover: boolean;
}
const props = withDefaults(
  defineProps<{
    goodsSpuSpecs: any[];
    skusData: any[];
  }>(),
  {
    skusData: () => [],
    goodsSpuSpecs: () => [],
  },
);

const emit = defineEmits(['getGoodsSkus']);

const state = reactive<dataType>({
  tableData: [],
  skusList: [],
  form: {
    salesPrice: 0,
    originalPrice: 0,
    costPrice: 0,
    stock: 0,
    weight: 0,
  },
  batchPopover: false,
});
const formRef = ref();
watch(
  () => props.goodsSpuSpecs,
  (val) => {
    const array: any = [];
    val.forEach((item: any) => {
      if (item.goodsSkuSpecsValues && item.goodsSkuSpecsValues.length > 0) {
        array.push(item.goodsSkuSpecsValues);
      }
    });
    let skuList = descartes(array);
    skuList = skuList.map((item: any) => ({
      goodsSkuSpecsValues: Array.isArray(item) ? item : [item],
      ids: (Array.isArray(item) ? item : [item]).map(
        (ites) => ites.specsValueId,
      ),
      id: '',
      salesPrice: 0,
      originalPrice: 0,
      costPrice: 0,
      stock: 0,
      status: '0',
      weight: 0,
      volume: 0,
    }));

    const skuList2 = props.skusData.map((item: any) => ({
      ...item,
      ids: item.goodsSkuSpecsValues.map((ites: any) => ites.specsValueId),
    }));
    skuList.forEach((item: any) => {
      skuList2.forEach((item2) => {
        if (arrEquals(item.ids, item2.ids)) {
          item.id = item2.id ?? '';
          item.salesPrice = item2.salesPrice ?? 0;
          item.originalPrice = item2.originalPrice ?? 0;
          item.costPrice = item2.costPrice ?? 0;
          item.stock = item2.stock ?? 0;
          item.status = item2.status ?? '0';
          item.weight = item2.weight ?? 0;
          item.volume = item2.volume ?? 0;
        }
      });
    });
    state.skusList = skuList;
  },
  { deep: true, immediate: true },
);
watch(
  () => state.skusList,
  (val) => {
    emit('getGoodsSkus', val);
  },
  { deep: true },
);

const batchAdd = () => {
  const fields = [
    'salesPrice',
    'originalPrice',
    'costPrice',
    'stock',
    'weight',
    'volume',
  ] as const;

  state.skusList.forEach((item: any) => {
    fields.forEach((field) => {
      const value = state.form[field];
      if (value !== undefined && value !== null && value !== '') {
        item[field] = value;
      }
    });
  });
  popoverClose();
};
const popoverClose = () => {
  state.batchPopover = false;
  state.form = {
    salesPrice: 0,
    originalPrice: 0,
    costPrice: 0,
    stock: 0,
    firstRate: 0,
    secondRate: 0,
    weight: 0,
    volume: 0,
  };
};
</script>
<template>
  <div v-if="state.skusList.length > 0">
    <ElTable :data="state.skusList" border style="width: 100%">
      <ElTableColumn
        show-overflow-tooltip
        v-for="(item, index) in goodsSpuSpecs"
        :key="index"
        :prop="item.id"
        :label="item.specsName ? item.specsName : '未选择'"
      >
        <template #default="scope">
          {{
            scope.row.goodsSkuSpecsValues[index]
              ? scope.row.goodsSkuSpecsValues[index].specsValueName
              : '未选择'
          }}
        </template>
      </ElTableColumn>
      <ElTableColumn prop="salesPrice" label="售价">
        <template #default="scope">
          <ElInputNumber
            v-model="scope.row.salesPrice"
            style="width: 100%"
            :min="0"
            :precision="2"
            :controls="false"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="originalPrice" label="原价">
        <template #default="scope">
          <ElInputNumber
            v-model="scope.row.originalPrice"
            style="width: 100%"
            :min="0"
            :precision="2"
            :controls="false"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="costPrice" label="成本价">
        <template #default="scope">
          <ElInputNumber
            v-model="scope.row.costPrice"
            style="width: 100%"
            :min="0"
            :precision="2"
            :controls="false"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="stock" label="库存">
        <template #default="scope">
          <ElInputNumber
            v-model="scope.row.stock"
            style="width: 100%"
            :min="0"
            :precision="0"
            :controls="false"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="weight" label="重量(kg)">
        <template #default="scope">
          <ElInputNumber
            v-model="scope.row.weight"
            style="width: 100%"
            :min="0"
            :precision="2"
            :controls="false"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="volume" label="体积(m³)">
        <template #default="scope">
          <ElInputNumber
            v-model="scope.row.volume"
            style="width: 100%"
            :min="0"
            :precision="2"
            :controls="false"
          />
        </template>
      </ElTableColumn>
      <ElTableColumn prop="status" label="状态" width="90px">
        <template #default="scope">
          <ElSwitch
            v-model="scope.row.status"
            inline-prompt
            active-value="0"
            inactive-value="1"
            active-text="启用"
            inactive-text="停用"
          />
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPopover
      placement="right"
      :visible="state.batchPopover"
      :width="350"
      trigger="click"
    >
      <div class="popover-input">
        <ElForm ref="formRef" :model="state.form" label-width="120px">
          <ElFormItem label="售价">
            <ElInputNumber
              v-model="state.form.salesPrice"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入商品售价"
            />
          </ElFormItem>
          <ElFormItem label="原价">
            <ElInputNumber
              v-model="state.form.originalPrice"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入商品原价"
            />
          </ElFormItem>
          <ElFormItem label="成本价">
            <ElInputNumber
              v-model="state.form.costPrice"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入商品成本价"
            />
          </ElFormItem>
          <ElFormItem label="库存">
            <ElInputNumber
              v-model="state.form.stock"
              :min="0"
              :precision="0"
              :controls="false"
              placeholder="请输入商品库存"
            />
          </ElFormItem>
          <ElFormItem label="重量">
            <ElInputNumber
              v-model="state.form.weight"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入商品重量"
            />
          </ElFormItem>
          <ElFormItem label="体积">
            <ElInputNumber
              v-model="state.form.volume"
              :min="0"
              :precision="2"
              :controls="false"
              placeholder="请输入商品体积"
            />
          </ElFormItem>
          <ElFormItem label-width="120px">
            <ElButton @click="popoverClose">关闭</ElButton>
            <ElButton @click="batchAdd" type="primary">保存</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
      <template #reference>
        <ElButton
          link
          @click="state.batchPopover = true"
          v-if="state.skusList.length > 0"
          type="primary"
        >
          批量设置
        </ElButton>
      </template>
    </ElPopover>
  </div>
</template>
